<template>
  <smart-table
    :title="routerTitle"
    :formList="routerFormList"
    :selectUrl="routerSelectUrl"
    :insertUrl="routerInsertUrl"
    :updateUrl="routerUpdateUrl"
    :deleteUrl="routerDeleteUrl"
    :exportExcelUrl="routerExportUrl"
    :importExcelUrl="routerImportUrl"
    :tableColumns="routerTableColumns"
    :formButtonCtl="routerFormButtonCtl"
    :formRules="routerFormRules"
    :maxOptionButtonCount="5">
    <template slot="table-button" slot-scope="row">
      <el-button type="warning" icon="el-icon-connection" @click="showBindDialog(row.row)">绑定</el-button>
    </template>
    <template slot="dialog-custom-form">
      <el-dialog :visible.sync="bindDialogVisible" width="50%" center>
        <div class="title" slot="title">当前选中资源:{{ currentRouter.name }}</div>
        <el-tree
          ref="permissionTreeOfRouter"
          :data="permissionList"
          default-expand-all
          show-checkbox
          node-key="id"
          auto-expand-parent
          :props="{
            children: 'children',
            label: 'title',
          }">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="bindDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="bindPermission(currentRouter.id)">绑定</el-button>
        </div>
      </el-dialog>
    </template>
  </smart-table>
</template>

<script>
export default {
  name: 'Router',
  data() {
    return {
      //绑定弹窗
      bindDialogVisible: false,
      //当前路由
      currentRouter: {},
      //所有的权限列表
      permissionList: [],
      //原始的角色权限列表
      oldPermission: [],
      //主题
      routerTitle: '路由',
      //表单列表
      routerFormList: [
        {
          title: '路由名',
          name: 'name',
          type: 'input',
        },
        {
          title: '路径',
          name: 'uri',
          type: 'text',
        },
        {
          title: '方法',
          name: 'method',
          type: 'select',
          optionList: [],
        },
      ],
      //路由查询路径
      routerSelectUrl: 'router/lookRouter',
      //路由新增路径
      routerInsertUrl: 'router/insertOneRouter',
      //路由更新路径
      routerUpdateUrl: 'router/updateOneRouter',
      //路由删除路径
      routerDeleteUrl: 'router/deleteRouters',
      //导出路径
      routerExportUrl: '/userService/router/export',
      //导入路径
      routerImportUrl: '/userService/router/import',
      //表格列
      routerTableColumns: [
        {
          title: '路由名',
          name: 'name',
        },
        {
          title: '请求路径',
          name: 'uri',
        },
        {
          title: '请求方式',
          name: 'method',
          type: 'tag',
          tagStyle: {},
          tipMap: {},
          filters: [],
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      routerFormButtonCtl: {
        detailButton: false,
      },
      //请求方式映射
      methodMap: {
        style: {
          GET: 'primary',
          POST: 'success',
          PUT: 'warning',
          DELETE: 'danger',
        },
        tip: {
          GET: 'GET请求',
          POST: 'POST请求',
          PUT: 'PUT请求',
          DELETE: 'DELETE请求',
        },
        filters: [
          { title: 'GET请求', name: 'GET' },
          { title: 'POST请求', name: 'POST' },
          { title: 'PUT请求', name: 'PUT' },
          { title: 'DELETE请求', name: 'DELETE' },
        ],
      },
      //表单校验
      routerFormRules: {
        name: [
          {
            required: true,
            message: '路由名不得为空!',
            trigger: 'blur',
          },
        ],
        uri: [
          {
            required: true,
            message: '请求路径不得为空!',
            trigger: 'blur',
          },
        ],
        method: [
          {
            required: true,
            message: '请至少选择一个请求方式!',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    this.lookAllPermission()
  },
  mounted() {
    this.addConfig()
  },
  methods: {
    //合并属性
    addConfig() {
      //下拉框数据注入
      this.$set(this.routerFormList[2], 'optionList', this.methodMap.filters)
      //表格筛选
      this.$set(this.routerTableColumns[2], 'filters', this.methodMap.filters)
      //标签样式
      this.$set(this.routerTableColumns[2], 'tagStyle', this.methodMap.style)
      //提示
      this.$set(this.routerTableColumns[2], 'tipMap', this.methodMap.tip)
    },
    //获取所有权限
    lookAllPermission() {
      //获取所有权限
      this.$store.dispatch('permission/lookAllPermission', {}).then((response) => {
        this.permissionList = response.data
      })
    },
    //显示绑定弹窗
    showBindDialog(item) {
      this.bindDialogVisible = true
      this.currentRouter = item
      this.initBindDialog(item)
    },
    //初始化绑定弹窗
    initBindDialog(item) {
      //获取当前角色绑定的权限列表
      this.$store.dispatch('permission/lookPermissionByRouter', item.id).then((response) => {
        //当前权限数据
        this.$refs.permissionTreeOfRouter.setCheckedKeys(response.data)
        //复制列表数据
        this.oldPermission = response.data
      })
    },
    //绑定权限
    bindPermission(id) {
      //获取当前权限数据
      var newPermission = this.$refs.permissionTreeOfRouter.getCheckedKeys()
      //新增的列表
      var addList = newPermission.filter((v) => !this.oldPermission.includes(v))
      //新增的列表
      var deleteList = this.oldPermission.filter((v) => !newPermission.includes(v))
      //新增列表
      if (addList.length > 0) {
        //映射条件
        var addMap = {}
        addMap[id] = addList
        this.$store.dispatch('router/bindPermission', addMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: `绑定权限成功!`,
              showClose: true,
            })
          }
        })
      }
      //删除列表
      if (deleteList.length > 0) {
        //映射条件
        var deleteMap = {}
        deleteMap[id] = deleteList
        this.$store.dispatch('router/unbindPermission', deleteMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: `解绑权限成功!`,
              showClose: true,
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .title {
  text-align: center;
  font-size: large;
  color: red;
}
.el-transfer {
  margin: auto;
}
</style>
